<template>
  <div class="my">
    <div class="my_header_bg">
      <div class="my_photo">
        <img :src="userInfo.head_pic?userInfo.head_pic:'/img/46.png'" alt width="100%" />
      </div>
      <div class="my_info">
        <div class="my_name">{{userInfo.nickname}}</div>
        <div class="my_id">ID:anne_farm_{{userInfo.user_id}}</div>
      </div>
      <div class="member_level">
        <img src="/img/54.png" alt class="member_level_icon" />
        <router-link class="member_level_text" to="/vipgrade">{{myLevel.level_name}}</router-link>
      </div>
    </div>
    <div class="my_content">
      <div class="my_asset">
        <div class="asset_item">
          <div class="asset_item_value">￥{{userInfo.user_money}}</div>
          <div class="asset_item_key">余额</div>
        </div>
        <div class="asset_item">
          <div class="asset_item_value">{{userInfo.pay_points}}</div>
          <div class="asset_item_key">积分</div>
        </div>
        <div class="asset_item">
          <div class="asset_item_value">{{userInfo.anni_points}}</div>
          <div class="asset_item_key">安妮豆</div>
        </div>
      </div>
      <div class="my_order">
        <div class="my_order_title">
          <div class="my_order_text">我的订单</div>
          <div class="all_order_text" @click="goeMyOrder('all')">
            全部订单
            <img src="/img/44.png" class="right_arror" alt />
          </div>
        </div>
        <div class="my_order_entrance">
          <div
            class="entrance_item"
            v-for="(item, index) in entranceList"
            :key="index"
            @click="goeMyOrder(index)"
          >
            <div class="entrance_item_icon">
              <img class="entrance_item_icon_img" :src="item.path" alt />
            </div>
            <div class="entrance_item_label">{{item.label}}</div>
          </div>
        </div>
      </div>
      <div class="my_serve">
        <div class="my_serve_title">我的服务</div>
        <div class="my_serve_item_warp"> 
          <div
            class="my_serve_item"
            v-for="(item, index) in myServeList"
            :key="index" v-if="!item.hide"
            @click="goMyServe(item.router)"
          > 
              <div class="my_serve_icon">
                <img :src="item.serveIcon" alt />
              </div>
              <div class="my_serve_name">{{item.serveName}}</div>
           
          </div>
        </div>
      </div>
      <div class="my_leave" v-if="if_old_member">
        <div class="my_leave_card" v-for="(item, index) in myLeaveProductList" :key="index">
          <img class="my_leave_icon" :src="item.myLeaveIcon" alt />
          <div class="my_leave_key">{{item.myLeaveKey}}</div>
          <div class="my_leave_value">{{myLevelValue}}斤</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userInfo: this.$cookie.getUserInfo(),
      myInfo: {
        myName: "AN_32JN454345K",
        myId: "53478933",
        myLevel: "黄金会员",
        my_photo: "/img/46.png"
      },
      myAsset: [
        { assetKey: "余额", assetValue: "¥24.00" },
        { assetKey: "积分", assetValue: "344" },
        { assetKey: "我的安妮豆", assetValue: "3" }
      ],
      entranceList: [
        { path: "/img/20.png", label: "待付款" },
        { path: "/img/22.png", label: "待发货" },
        { path: "/img/24.png", label: "待收货" },
        { path: "/img/28.png", label: "已收货" },
        { path: "/img/27.png", label: "售后服务" }
      ],
      myServeList: [
        { serveName: "我的钱包", serveIcon: "/img/21.png", router: "wallet" },
        { serveName: "我的积分", serveIcon: "/img/23.png", router: "integral" },
        {
          serveName: "我的安妮豆",
          serveIcon: "/img/18.png",
          router: "annieBean"
        },
        {
          serveName: "我的收藏",
          serveIcon: "/img/16.png",
          router: "myCollection"
        },
        {
          serveName: "意见反馈",
          serveIcon: "/img/15.png",
          router: "myFeedback"
        },
        { serveName: "专属商品", serveIcon: "/img/17.png", router: "privateGoods", hide: !this.if_old_member },
        {
          serveName: "地址管理",
          serveIcon: "/img/19.png",
          router: "myAddressManagement"
        },
        {
          serveName: "优惠券",
          serveIcon: "/img/81.png",
          router: "mycoupon"
        }
      ],
      myLeaveProductList: [
        {
          myLeaveKey: "我的蔬菜剩余",
          myLeaveValue: "0斤",
          myLeaveIcon: "/img/25.png"
        }
      ]
    };
  },
  methods: {
    goeMyOrder(active) {
      if (active == 4) {
        this.$router.push({ path: "/afterService" });
      } else {
        active == "all" ? (active = 0) : (active = active + 1);
        active < 5 &&
          this.$router.push({ name: "allOrder", query: { active } });
      }
    },
    goMyServe(router) {
      this.$router.push({ name: router });
    }
  },
  computed:{
    levelConfig(){
      console.log(this.$cookie.getLevelConfig(), this.$cookie.getUserInfo() )
      return this.$cookie.getLevelConfig() 
    },
    myLevel(){      
      if( this.levelConfig[this.userInfo.level] )
      return this.levelConfig[this.userInfo.level]
      return {
        level_id: 0,
        level_name: '普通会员',
        goods_num: 0
      }
    },
    canDrawGoodsWeight(){
      return this.$cookie.getCanDrawGoodsWeight()
    },
    myLevelValue(){
      return this.canDrawGoodsWeight/500
    },
    if_old_member(){
      if(this.userInfo && this.userInfo.if_old_member){
        return true
      }
      return false
    }
  }
};
</script>

<style lang="less" rel="stylesheet/less" scoped>
.my {
  min-height: 100vh;
  background: rgba(247, 247, 247, 1);
  position: relative;
  padding-bottom: 60px;
  .my_header_bg {
    position: relative;
    width: 375px;
    height: 205px;
    background: linear-gradient(
      76deg,
      rgba(80, 96, 129, 1) 0%,
      rgba(51, 66, 99, 1) 100%
    );
    padding-top: 79px;
    box-sizing: border-box;
    .my_photo {
      float: left;
      margin-left: 11px;
      margin-top: 5px;
      margin-right: 8px;
      width: 54px;
      height: 54px;
      background-color: #fff;
      border-radius: 50%;
      border: 1px solid #fff;
      overflow: hidden;
    }
    .my_info {
      float: left;
      margin-top: 5px;
      color: #fff;
      .my_name {
        height: 23px;
        font-size: 16px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 23px;
      }
      .my_id {
        margin-top: 5px;
        height: 18px;
        font-size: 13px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 18px;
      }
    }
    .member_level {
      display: flex;
      align-items: center;
      float: right;
      margin-right: 25px;
      width: 93px;
      height: 31px;
      line-height: 31px;
      background: rgba(255, 255, 255, 1);
      border-radius: 18px;
      .member_level_icon {
        align-items: center;
        float: left;
        width: 20px;
        margin-left: 4px;
      }
      .member_level_text {
        float: left;
        margin-left: 5px;
        font-size: 13px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(244, 142, 0, 1);
      }
    }
  }
  .my_content {
    position: relative;
    margin: 0 auto;
    margin-top: -35px;
    margin-left: 50%;
    width: 357px;
    transform: translateX(-50%);
    .my_asset {
      display: flex;
      height: 63px;
      background: rgba(255, 255, 255, 1);
      border-radius: 5px;
      .asset_item {
        width: 33.33%;
        text-align: center;
        margin-top: 10px;
        margin-bottom: 12px;
        .asset_item_value {
          height: 25px;
          font-size: 18px;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          color: rgba(57, 77, 117, 1);
          line-height: 25px;
        }
        .asset_item_key {
          height: 15px;
          font-size: 11px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(48, 48, 48, 1);
          line-height: 15px;
        }
      }
    }
    .my_order {
      margin-top: 8px;
      height: 111px;
      background: rgba(255, 255, 255, 1);
      border-radius: 5px;
      padding: 11px 12px 17px;
      box-sizing: border-box;
      .my_order_title {
        overflow: hidden;
        margin-bottom: 17px;
        .my_order_text {
          float: left;
          height: 18px;
          font-size: 13px;
          font-family: PingFangSC-Medium;
          font-weight: 700;
          color: rgba(48, 48, 48, 1);
          line-height: 18px;
        }
        .all_order_text {
          display: flex;
          align-items: center;
          float: right;
          font-size: 11px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
          line-height: 18px;
          .right_arror {
            width: 16px;
            align-items: center;
          }
        }
      }
      .my_order_entrance {
        display: flex;
        .entrance_item {
          width: 25%;
          text-align: center;
          .entrance_item_icon_img {
            width: 30px;
          }
          .entrance_item_label {
            height: 15px;
            font-size: 11px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(48, 48, 48, 1);
            line-height: 15px;
          }
        }
      }
    }
    .my_serve {
      margin-top: 9px;
      // height: 180px;
      background: rgba(255, 255, 255, 1);
      border-radius: 5px;
      .my_serve_title {
        padding: 10px 0 19px 12px;
        font-size: 13px;
        font-family: PingFangSC-Medium;
        font-weight: 700;
        color: rgba(48, 48, 48, 1);
      }
      .my_serve_item_warp {
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        .my_serve_item {
          width: 25%;
          margin-bottom: 15px;
          .my_serve_icon {
            img {
              width: 28px;
            }
          }
          .my_serve_name {
            font-size: 11px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(48, 48, 48, 1);
          }
        }
      }
    }
    .my_leave {
      margin-top: 9px;
      .my_leave_card {
        display: flex;
        align-items: center;
        height: 54px;
        background: rgba(255, 255, 255, 1);
        border-radius: 5px;
        .my_leave_icon {
          align-items: center;
          margin-left: 23px;
          margin-right: 6px;
          width: 28px;
        }
        .my_leave_key,
        .my_leave_value {
          align-items: center;
          flex: 4;
          font-size: 13px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(48, 48, 48, 1);
        }
        .my_leave_value {
          flex: 1;
          font-family: PingFangSC-Medium;
          font-weight: 500;
        }
      }
    }
  }
}
</style>

